<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from "three";
import {MTLLoader, OBJLoader} from 'three-obj-mtl-loader'
import * as OrbitControls from 'three-orbitcontrols';

export default {
  data() {
    return {
      camera: null,
      scene: null,
      controls: null,
      renderer: null,
      planePositionY: -18, //地板高度
      containerW: window.innerWidth,
      containerH: window.innerHeight
    };
  },

  components: {},

  methods: {
    //加载模型文件
    loadModel() {
      var mtlLoader = new MTLLoader();
      mtlLoader.setPath("/static/glasses_models/");
      //加载mtl文件
      mtlLoader.load("/glassRoot_1221/glassRoot.mtl", (material) => {
        material.preload();
        var objLoader = new OBJLoader();
        //设置当前加载的纹理
        objLoader.setMaterials(material);
        objLoader.setPath("/static/glasses_models/");
        objLoader.load("/glassRoot_1221/glassRoot_1221.obj", (object) => {
          //调整模型角度
          object.position.x = 2;
          object.position.z = 2;
          object.rotation.y = 45 * Math.PI / 180;

          //如需使用阴影：
          // for (var k in object.children) {
          //     //由于模型文件并不是看上去的一个整体，所以需要进行迭代
          //     //对其中的所有children都设置接收阴影以及投射阴影
          //     //才能看到阴影效果
          //     object.children[k].castShadow = true;   //设置该对象可以产生阴影
          //     object.children[k].receiveShadow = true;  //设置该对象可以接收阴影
          // }
          //将模型缩放并添加到场景当中
          this.scene.add(object);
        });
      });
    },
    //初始化摄像头
    initCamera() {
      //渲染视图视角
      this.camera.position.x = 17;
      this.camera.position.y = 3.5;
      this.camera.position.z = 0;
      //镜头远近，数值越小越远
      this.camera.setLens(22);
      //lookat接收的是一个vector3的实例
      // camera.lookAt(scene.position);
    },
    //初始化灯光
    initLight() {
      //环境光
      var ambientLight = new THREE.AmbientLight("#ffffff");
      ambientLight.intensity = 0.1;
      this.scene.add(ambientLight);

      //平行光
      var directionalLight = new THREE.DirectionalLight("#ffffff");
      directionalLight.position.set(45, 50, 10);

      directionalLight.shadow.camera.near = 20; //产生阴影的最近距离
      directionalLight.shadow.camera.far = 200; //产生阴影的最远距离
      directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置
      directionalLight.shadow.camera.right = 50; //最右边
      directionalLight.shadow.camera.top = 50; //最上边
      directionalLight.shadow.camera.bottom = -50; //最下面

      //这两个值决定使用多少像素生成阴影 默认512
      directionalLight.shadow.mapSize.height = 1024;
      directionalLight.shadow.mapSize.width = 1024;

      //告诉平行光需要开启阴影投射
      directionalLight.castShadow = true;

      //灯光强度
      directionalLight.intensity = 0.2;

      //add到camera可以使灯光相对摄像机不动
      this.camera.add(directionalLight);

      // var helper = new THREE.DirectionalLightHelper(directionalLight, 50, 0x9400D3);
      // scene.add(helper);
    },
    //初始化控制器
    initControls() {
      //OrbitControls
      this.controls = new OrbitControls(
        this.camera,
        this.renderer.domElement
      );
      //动态阻尼系数 就是鼠标拖拽旋转灵敏度
      this.controls.dampingFactor = 0.1;
      //是否可以缩放
      // controls.enableZoom = true;
      //是否自动旋转
      this.controls.autoRotate = true;
      // controls.rotateSpeed = 0.1;
      //设置相机距离原点的最远距离
      // controls.minDistance = 200;
      //设置相机距离原点的最远距离
      // controls.maxDistance = 600;
      //是否开启右键拖拽
      // controls.enablePan = true;

      this.controls.maxDistance = 20;
      this.controls.minDistance = 7;

      //OrbitControls动画
      this.animate();
    },
    //控制器旋转动画
    animate() {
      //更新控制器
      this.controls.update();
      //更新性能插件
      // stats.update();
      window.requestAnimationFrame(this.animate);
    },
    //初始化网格背景
    initGrid(spacing) {
      //spacing正方形边长
      var planeW = 200; //正方形地板的长
      var geometry = new THREE.Geometry();
      geometry.vertices.push(new THREE.Vector3(0 - planeW, 0, 0));
      geometry.vertices.push(new THREE.Vector3(planeW, 0, 0));
      var linesMaterial = new THREE.LineBasicMaterial({
        color: 0x000000,
        opacity: 0.2,
        linewidth: 0.1
      });
      for (var i = 0; i <= planeW / spacing * 2; i++) {
        var line = new THREE.Line(geometry, linesMaterial);
        line.position.z = i * spacing - planeW;
        line.position.y = this.planePositionY;
        this.camera.add(line); //add到camera可以使网格相对摄像机不动

        var line = new THREE.Line(geometry, linesMaterial);
        line.position.x = i * spacing - planeW;
        line.position.y = this.planePositionY;
        line.rotation.y = 90 * Math.PI / 180;
        this.camera.add(line);
      }
    },
    //场景渲染
    renderScene() {
        this.scene.add(this.camera);  //因为line和light都add到了camera，然后需要把camera add到scene
        this.renderer.render(this.scene, this.camera);
        window.requestAnimationFrame(this.renderScene);
    }
  },

  mounted() {
    const container = document.getElementById("container"); //展示容器

    this.scene = new THREE.Scene(); //场景构建
    this.camera = new THREE.PerspectiveCamera(
      45,
      this.containerW / this.containerH,
      0.1,
      1000
    ); //相机构建
    //antialias:true 增加抗锯齿效果
    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); //渲染器构建
    this.renderer.setClearColor(0x000000, 0.0);
    this.renderer.setSize(this.containerW, this.containerH);
    this.renderer.shadowMapEnabled = true; //激活阴影
    this.renderer.setPixelRatio(window.devicePixelRatio);
    container.appendChild(this.renderer.domElement);

    this.loadModel();
    this.initCamera();
    this.initLight();
    this.initControls();
    this.initGrid(8);
    this.renderScene();
  }
};
</script>

<style>
body {
  font-family: Monospace;
  background: #fff;
  color: #fff;
  margin: 0px;
  overflow: hidden;
}
#container {
  width: 100%;
  height: 100%;
}
</style>
